<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="resources/favicon.png">
	<link rel="alternate" type="application/rss+xml" title="丁丁的博客" href="http://www.baidu.com/">
	<link rel="stylesheet" type="text/css" href="resources/css/style.css">
	<title>Test</title>
</head>
<body>
	<div class="container">
		<div class="columns page-header">
			<h1>Test中文</h1>
		</div>
		<div class="columns">
			<div class="navigation">
				<div class="menus-main">
					<a class="favicon" href="#"><img src="favicon.png" alt=""></a>
					<a href="#">One</a>
					<a href="#">Two</a>
					<a href="#">三</a>
					<a href="#">四</a>
					<a href="#">Five</a>
				</div>
				<div class="right menus-right">
					<a href="#">Six</a>
					<a href="#">Seven</a>
					<a href="#">Eight</a>
				</div>
			</div>
		</div>
		<div class="columns">
			<div class="block-body column three-fourths">
				<div class="archive-title">
					<a href="#">abc中文</a>&nbsp;ABCABC中文测试&nbsp;<a href="#">abc中文</a>
				</div>
				<article>
					<header>
						<h2><a href="http://www.hexcode.cn">文章标题 Title</a></h2>
					</header>
					<div class="article-meta clearfix">
						<time class="left">2016年8月13日</time>
						<ul class="tags right">
							<li><a href="www.hexcode.cn">HTML</a></li>
							<li><a href="www.hexcode.cn">JavaScript</a></li>
							<li><a href="www.hexcode.cn">CSS</a></li>
						</ul>
					</div>
					<div class="markdown-body">
<h1>Test h1</h1><h2>Test h2</h2><h3>Test h3</h3>
<p>有人说「<a href="http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html" target="_blank" rel="external">JavaScript 是花了 10 天时间匆忙被设计出来的语言</a>」，也有人说「<a href="https://blog.codinghorror.com/the-principle-of-least-power" target="_blank" rel="external">凡是能用 JavaScript 写出来的，最终都会用 JavaScript 写出来</a>」。写这篇文并非要对 JavaScript 做一个全面的优劣分析，而是想与大家分享一些存在于 JavaScript 及其生态系统中的、在我看来比较有趣的闪光点。  </p>
<h3 id="u63D2_u4EF6_u5316_u7684_u8BED_u8A00_u7279_u5F81"><a href="#u63D2_u4EF6_u5316_u7684_u8BED_u8A00_u7279_u5F81" class="headerlink" title="插件化的语言特征"></a>插件化的语言特征</h3><p>JavaScript 曾经是一门兼容性最糟糕、升级最困难的语言。开发者们要苦等到所有用户都升级了浏览器，才敢使用新版本的特征。然而在最近几年，随着 <a href="https://babeljs.io/" target="_blank" rel="external">Babel</a> 等编译器的兴起，越来越多的 JavaScript 开发者们都放开了手，开始在生产环境中使用那些尚未被纳入标准的语言特征了。</p>
<p>使用了 Babel 的项目需要在发布之前引入一个「构建」的步骤，将使用了较新的语言特征的源代码转译为兼容性更好、被所有浏览器所支持的早期版本的 JavaScript，所以开发者就不必再去关心用户的浏览器是否支持这项新特征了。</p>
<p>Babel 是一个开源的、插件化的编译器框架，JavaScript 的每个语言特征（包括那些还未被纳入标准的）都被实现成了一个插件，插件可以遍历和替换 <a href="https://github.com/thejameskyle/babel-handbook/blob/master/translations/en/plugin-handbook.md" target="_blank" rel="external">AST</a>，进而对编译的结果施加影响。令人兴奋的一点是 Babel 让语言的特征形成了模块化，也就是说开发者可以在构建脚本中来配置要使用的语言特征。</p>
<p>Babel 的出现大大加速了 JavaScript 的进化。因为一旦有人希望在 JavaScript 中加入一个新特征，他首先会去实现一个 Babel 插件，然后很快就会有开发者去使用这个插件（这个过程不过是修改一下构建脚本）。这样新特征会得到来自一线开发者的验证和反馈，并有效地得以改进，如此形成一个良性循环。对比来看，某一些语言的新特征在设计和普及阶段进展非常缓慢。因为如果一个特征无法成为标准，就不会有开发者使用，而没有开发者使用，标准的制定者又无法得到足够的反馈，进而推迟进入标准的时间。</p>
<h3 id="u603B_u6709_u4E00_u79CD_u9002_u5408_u4F60_u7684_u65B9_u8A00"><a href="#u603B_u6709_u4E00_u79CD_u9002_u5408_u4F60_u7684_u65B9_u8A00" class="headerlink" title="总有一种适合你的方言"></a>总有一种适合你的方言</h3><p>除了对 JavaScript 本身的增强，社区中还有着上百种编译成 JavaScript 的「<a href="https://github.com/jashkenas/coffeescript/wiki/list-of-languages-that-compile-to-js" target="_blank" rel="external">方言</a>」。创造一种 JavaScript 的方言并不难，你只要编写一个从源代码到 <a href="https://github.com/estree/estree" target="_blank" rel="external">ES AST</a> 的词法和语法分析器，后续的步骤交给 Babel 就好。社区中比较知名的几种方言有：</p>
<ul>
<li><a href="http://coffeescript.org/" target="_blank" rel="external">CoffeeScript</a>：提供更简洁的语法，可以省略大部分的括号和花括号。</li>
<li><a href="http://www.typescriptlang.org/" target="_blank" rel="external">TypeScript</a>：强类型的 JavaScript，提供编译期类型检查。</li>
<li><a href="https://github.com/clojure/clojurescript" target="_blank" rel="external">ClojureScript</a>：提供 Clojure（Lisp）风格的语法。</li>
<li><a href="http://www.purescript.org/" target="_blank" rel="external">PureScript</a>：<a href="https://www.infoq.com/news/2014/09/purescript-haskell-javascript" target="_blank" rel="external">类 Haskell 的语法和类型系统</a>。</li>
<li><a href="https://facebook.github.io/jsx/" target="_blank" rel="external">JSX</a>：混写 JavaScript 与 HTML（React DOM）。</li>
</ul>
<p>这些方言有着各自的风格，从外观来看语法完全不同，但它们最终都会编译成标准的 JavaScript，这意味着它们之间是可以互操作的，你可以在一个 TypeScript 的项目中使用 CoffeeScript 编写的库，反之亦然。你甚至可以在一个项目中混用不同的方言。</p>
<p>开发者很少需要担心新特征或方言带来的不稳定性，因为代码最终会被编译成标准的 JavaScript，只要编译的过程没有错误，最后都是交由 JavaScript 引擎来执行，这并没有为 JavaScript 引擎带来新的复杂度。一旦有一天你决定不再使用某个特征或方言时也不要紧，直接使用编译后的 JavaScript 就好了。</p>
<p>这样一来，可以说 JavaScript 不再是一门语言，而是一个 JVM（<em>JavaScript</em> Virtual Machine）了。同时因为浏览器厂商（它们是这个世界上最大的科技巨头）之间的竞争和合作，JavaScript 有着几乎是所有虚拟机语言中最好的性能。</p>
<h3 id="u7CBE_u7B80_u800C_u7075_u6D3B_u7684_u8BED_u8A00_u6838_u5FC3"><a href="#u7CBE_u7B80_u800C_u7075_u6D3B_u7684_u8BED_u8A00_u6838_u5FC3" class="headerlink" title="精简而灵活的语言核心"></a>精简而灵活的语言核心</h3><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects" target="_blank" rel="external">JavaScript 的标准库</a>仅包含了非常有限的功能，某种程度上来说这也是件好事 —— 精简的标准库给第三方库留出了充分的竞争空间，真正得到大家认可的库才会被广泛使用，而不仅仅因为它被包含在了标准库中。</p>
<p>JavaScript 语言本身并没有定义得非常好的「范式」，你可以使用函数式的风格，比如函数作为参数和返回值、闭包、<a href="https://github.com/stoeffel/awesome-fp-js" target="_blank" rel="external">lodash 等函数式工具</a>、<a href="https://facebook.github.io/immutable-js" target="_blank" rel="external">Immutable.js</a> 提供的不可变数据类型（ES2015 甚至还包括了<a href="https://github.com/v8/v8/commit/6131ab1edd6e78be01ac90b8f0b0f4f27f308071" target="_blank" rel="external">尾递归优化</a>）；你还可以使用面向对象的风格，比如使用原型 prototype 构造出具有静态成员和实例成员、支持继承和多态的类（ES2015 也添加了 class 这个关键字来更加方便直观地定义类）。</p>
<p>正是 JavaScript 的这种灵活性，赋予了类库的设计者很大的施展空间。很多知名的类库可以说是创造了一种新的编程范式：</p>
<ul>
<li><a href="http://backbonejs.org/" target="_blank" rel="external">Backbone</a>：面向对象的 ORM，通过事件模型来通知对象的变化。</li>
<li><a href="http://expressjs.com/" target="_blank" rel="external">Express</a>：通过定义串联的「中间件」来处理 HTTP 请求。</li>
<li><a href="https://facebook.github.io/react" target="_blank" rel="external">React</a>：每当状态发生变化便重新渲染整个页面，减少用户界面状态管理的复杂度。</li>
</ul>
<h3 id="u4E0D_u6B62_u4E8E_u6D4F_u89C8_u5668_u73AF_u5883"><a href="#u4E0D_u6B62_u4E8E_u6D4F_u89C8_u5668_u73AF_u5883" class="headerlink" title="不止于浏览器环境"></a>不止于浏览器环境</h3><p>JavaScript 不仅可以在浏览器中运行，因为它精简的语言核心（甚至不包括任何 IO 相关的功能），现在已经被移植到了其他很多平台：</p>
<ul>
<li><a href="https://nodejs.org/" target="_blank" rel="external">Node.js</a>：提供了访问文件系统、进行网络操作的 API，用于构建 Web 后端等服务器程序。</li>
<li><a href="http://ionicframework.com/" target="_blank" rel="external">Ionic</a> / Cordova：提供访问移动设备的 API，使用 Web 技术来构建移动应用。</li>
<li><a href="http://electron.atom.io/" target="_blank" rel="external">Electron</a>：让 JavaScript 可以同时访问 Web 和 Node.js 的 API，以便用 Web 技术来构建桌面应用。</li>
<li><a href="https://facebook.github.io/react-native" target="_blank" rel="external">React Native</a>：用 JavaScript 去操作原生 UI 组件来构建移动应用。</li>
</ul>
<p>这些环境下有着和浏览器中完全不同的 API，但运行的都是同样的 JavaScript 代码，你的业务逻辑代码可以在这些环境间共用。JavaScript 社区中大部分已有的、不依赖具体运行环境的工具库都可以不加修改地运行在这些新环境中。</p>
<h3 id="u5F02_u6B65_u5355_u7EBF_u7A0B_u662F_u628A_u53CC_u5203_u5251"><a href="#u5F02_u6B65_u5355_u7EBF_u7A0B_u662F_u628A_u53CC_u5203_u5251" class="headerlink" title="异步单线程是把双刃剑"></a>异步单线程是把双刃剑</h3><p>无论在浏览器还是 Node.js 中，JavaScript 都采用了异步单线程的并发模型，所有的 IO 操作都采取异步执行，并通过「回调函数」来接收结果。以 Node.js 为例，引擎内部使用了一个<a href="http://stackoverflow.com/questions/20346097/does-node-js-use-threads-thread-pool-internally" target="_blank" rel="external">固定数量的线程池</a>，通过操作系统的「IO 多路复用」功能来进行 IO 操作，这样即使有大量并发的 IO 操作，也不过是多花了一点内存来维护相关的数据结构，并不会创建新的线程。这也是为什么大家都说 Node.js 适合高并发场景的原因了。同时 JavaScript 暴露给开发者的线程只有一个，只有这个线程会执行 JavaScript 代码，所以开发者不必象其他一些多线程语言那样去关心线程同步和线程安全的问题。JavaScript 开发者对于异步任务的接受程度也更高，他们会尽可能地让没有依赖关系的操作并行执行，<a href="https://jysperm.me/2014/09/1843">让无谓的等待时间最小化</a>。</p>
<p>作为代价，JavaScript 中所有的 IO 操作都需要通过传递 <a href="http://www.infoq.com/cn/articles/nodejs-callback-hell" target="_blank" rel="external">回调函数</a> 的方式来获取结果，初学者会为此非常苦恼 —— 编写循环、处理异常时会束手束脚，异步回调的写法也非常繁琐，一不留神<a href="http://callbackhell.com/" target="_blank" rel="external">回调函数的嵌套就会失去控制</a>。为此社区创造了很多语言特性和工具来试图解决这个问题，包括 EventEmitter、async.js、Promise、co/generator、async/await 等。虽然基本可以认为 Promise 是未来的趋势，但目前还并没有普及到所有的 JavaScript 开发者，而且在这几种异步流程控制方案之间互相调用也很令人头痛。此外因为只有一个 JavaScript 线程在运行，所以如果在一个函数中有 CPU 密集的计算任务，它就会阻塞整个事件循环的处理，此时需要开发者手工让出线程，来处理事件循环中其他的事件。</p>
<p>好了，怕篇幅再长反而会分散大家对内容的理解和印象，就此收笔。我这儿还有些其他相关的内容，感兴趣的朋友可以继续读下去。</p>
<ul>
<li><a href="http://www.infoq.com/cn/presentations/javascript-the-world-best-programming-language" target="_blank" rel="external">JavaScript - The World’s Best Programming Language</a>（中文演讲）</li>
</ul>
					</div>
				</article>
				<article>
					<header>
						<h2><a href="http://www.hexcode.cn">文章标题Title</a></h2>
					</header>
					<div class="article-meta">2016年8月13日</div>
					<div class="markdown-body">ABC</div>
				</article>
				<article>
					<header>
						<h2><a href="http://www.hexcode.cn">文章标题Title</a></h2>
					</header>
					<div class="article-meta">2016年8月13日</div>
					<div class="markdown-body">ABC</div>
				</article>
				<div class="archive-title">ABC</div>
				<div class="archive-title">
<h2 id="-">评论</h2>
<p><strong>Pancts</strong> ：同是95后，同在沈阳，同样喜欢魔方，暗黑，星际，Minecraft。。
相同的爱好仿佛看到另一个我自己。。。
自愧不如。。从小就喜欢编程的我，现在却在慢慢堕落。。
喜欢的php也好久没在写了。。。
看到你的博客感觉终于有点力量促使我重新跳进这个坑。。。</p>
<hr>
<p><strong>ang</strong> ：没有记错的话，我和你应该在同一个群里呆过（好像是果壳的it群？），记得当时有cry（武汉某大学的女生），一段时间之后我退群了，从faceair的博客跳转过来的。</p>
				</div>
				<div class="archive-pagination">
					<div class="paginator">
						<span class="page-number current">1</span>
						<a href="#" class="page-number">2</a>
						<a href="#" class="page-number">3</a>
						<span class="space">...</span>
						<a href="/page/2" class="extend next" rel="next">»</a>
					</div>
				</div>
			</div>
			<div class="block-sidebar column one-fourth">
				<div class="widget text-content">
<p>精子生于 1995.11.25, 20 岁，英文 ID jysperm.</p>
<ul>
<li>有一个 <a href="https://jybox.net">精子粉丝团</a></li>
<li><a href="http://pidan.cat">皮蛋</a> 和 <a href="http://doufu.cat">豆腐</a> 的主人</li>
<li>创建了 <a href="https://atom-china.org">Atom 中文社区</a></li>
<li>坚持十余年的 <a href="https://jysperm.me">独立博客</a> 作者</li>
<li>高中退学，就职于 <a href="https://leancloud.cn">LeanCloud</a></li>
<li>在 <a href="https://github.com/jysperm">Github</a> 上积极参与开源社区</li>
</ul>
				</div>
				<div class="widget text-content">CBA</div>
				<div class="widget tags">
					<ul class="tag-list">
						<li class="tag-list-item"><a href="/tag/abc" class="tag-list-link">abc</a></li>
						<li class="tag-list-item"><a href="/tag/abc" class="tag-list-link">abc</a></li>
						<li class="tag-list-item"><a href="/tag/abc" class="tag-list-link">abc</a></li>
						<li class="tag-list-item"><a href="/tag/abc" class="tag-list-link">abc</a></li>
						<li class="tag-list-item"><a href="/tag/abc" class="tag-list-link">abc</a></li>
					</ul>
				</div>
				<div class="widget archives">
					<ul class="archive-list">
						<li class="archive-list-item"><a href="#" class="archive-list-link">八月 2016</a><span class="archive-list-count">1</span></li>
						<li class="archive-list-item"><a href="#" class="archive-list-link">八月 2016</a><span class="archive-list-count">1</span></li>
						<li class="archive-list-item"><a href="#" class="archive-list-link">八月 2016</a><span class="archive-list-count">1</span></li>
						<li class="archive-list-item"><a href="#" class="archive-list-link">八月 2016</a><span class="archive-list-count">1</span></li>
						<li class="archive-list-item"><a href="#" class="archive-list-link">八月 2016</a><span class="archive-list-count">1</span></li>
						<li class="archive-list-item"><a href="#" class="archive-list-link">八月 2016</a><span class="archive-list-count">1</span></li>
						<li class="archive-list-item"><a href="#" class="archive-list-link">八月 2016</a><span class="archive-list-count">1</span></li>
						<li class="archive-list-item"><a href="#" class="archive-list-link">八月 2016</a><span class="archive-list-count">1</span></li>
						<li class="archive-list-item"><a href="#" class="archive-list-link">八月 2016</a><span class="archive-list-count">1</span></li>
					</ul>
				</div>
				<div class="widget text-content">CBA</div>
			</div>
		</div>
		<div class="columns footer">
			<a href="http://www.miitbeian.gov.cn/" target="blank">苏ICP备15060831号</a>
		</div>
	</div>
	<script src=""></script>
	<script>		
	</script>
</body>
</html>